<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="dialogConfig.dialogType === 'edit' ? '修改档案' : '新增家庭档案'"
    :visible.sync="dialogVisible"
    width="70%"
    class="dialogBody"
    :before-close="addDialogClosed"
  >
    <el-tabs v-model="activeName" type="card" @tab-click="handlePageClick">
      <el-tab-pane label="第一页" name="1"></el-tab-pane>
      <el-tab-pane label="第二页" name="2"></el-tab-pane>
      <el-tab-pane label="第三页" name="3"></el-tab-pane>
    </el-tabs>
    <el-form
      :model="addModel"
      :rules="rules"
      label-position="left"
      ref="ruleForm"
      label-width="96px"
      class="addForm"
    >
      <!-- 第一页 -->
      <div v-show="activeName == '1'">
        <h3 class="titleName">家庭信息表</h3>
        <el-row :gutter="15">
          <el-col
            v-for="item in firstItemList"
            :key="item.prop"
            :span="item.span"
          >
            <el-form-item :label="item.label" :prop="item.prop">
              <el-input
                v-if="item.type === 'Input'"
                v-model.trim="addModel[item.prop]"
                :placeholder="item.placeholder"
              />
              <!-- 日期 -->
              <el-date-picker
                v-if="item.type === 'data'"
                v-model="addModel[item.prop]"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                :style="{ width: '100%' }"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <!-- 第二页 -->
      <div v-show="activeName == '2'">
        <h3 class="titleName">生活环境</h3>
        <el-row :gutter="15">
          <el-col
            v-for="item in secondItemList"
            :key="item.prop"
            :span="item.span"
          >
            <el-form-item :label="item.label" :prop="item.prop">
              <!-- 厨房 -->
              <Kitchen v-if="item.type === 'Kitchen'" :model="addModel" />
              <!-- 燃料类型 -->
              <Fuel v-if="item.type === 'Fuel'" :model="addModel" />
              <!-- 饮水 -->
              <Water v-if="item.type === 'Water'" :model="addModel" />
              <!-- 厕所 -->
              <Toilet v-if="item.type === 'Toilet'" :model="addModel" />
              <!-- 禽畜栏 -->
              <Poultry v-if="item.type === 'Poultry'" :model="addModel" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <!-- 第三页 -->
      <div v-if="activeName == '3'">
        <h3 class="titleName">家庭成员</h3>

        <vxe-table
          :align="allAlign"
          border
          show-header-overflow
          show-overflow
          highlight-hover-row
          :data="tableData"
        >
          <vxe-table-column
            type="seq"
            title="序号"
            width="60"
          ></vxe-table-column>
          <vxe-table-column field="name" title="姓名"></vxe-table-column>
          <vxe-table-column field="sex" title="性别"></vxe-table-column>
          <vxe-table-column
            field="birthdata"
            title="出生日期"
          ></vxe-table-column>
          <vxe-table-column
            field="identityNumber"
            title="身份证号"
          ></vxe-table-column>
          <vxe-table-column
            field="relationship"
            title="家庭关系"
          ></vxe-table-column>
        </vxe-table>
      </div>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogClosed">取 消</el-button>
      <el-button type="primary" @click="submitHandle('ruleForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import Kitchen from "@/components/CommonForm/form-item/Kitchen.vue"
import Fuel from "@/components/CommonForm/form-item/Fuel.vue"
import Water from "@/components/CommonForm/form-item/Water.vue"
import Toilet from "@/components/CommonForm/form-item/Toilet.vue"
import Poultry from "@/components/CommonForm/form-item/Poultry.vue"
import { validatePhone } from "@/simdata/validate.js"
// 手机号的验证
const checkPhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("手机号不能为空"))
  } else {
    if (validatePhone(value)) {
      callback()
    } else {
      return callback(new Error("请输入正确的手机号"))
    }
  }
}
export default {
  components: {
    Kitchen,
    Fuel,
    Water,
    Toilet,
    Poultry
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogConfig: {
      type: Object,
      default: () => ({
        title: "",
        dialogType: "new"
      })
    }
  },
  data() {
    return {
      activeName: "1",
      addModel: {
        name: "", // 姓名
        identityNumber: "", // 身份证
        population: "",
        phonenumber: "",
        createDate: "",
        number: "",
        nowAddress: "",
        HouseNumber: "",
        detailedAddress: "", // 详细地址
        kitchenList: [],
        fuelList: [],
        waterList: [],
        toiletList: [],
        poultryList: []
      },
      rules: {
        name: [{ required: true, message: "请输入户主姓名", trigger: "blur" }],
        identityNumber: [
          { required: true, message: "请输入户主身份证", trigger: "blur" }
        ],
        population: [
          { required: true, message: "请输入家庭人口数", trigger: "blur" }
        ],
        phonenumber: [
          { required: true, validator: checkPhone, trigger: "blur" }
        ],
        createDate: [
          { required: true, message: "请选择建档日期", trigger: "blur" }
        ],
        number: [
          { required: true, message: "请输入家庭档案号", trigger: "blur" }
        ],
        nowAddress: [
          { required: true, message: "请输入家庭住址", trigger: "blur" }
        ],
        HouseNumber: [
          { required: true, message: "请输入门牌号码/组", trigger: "blur" }
        ]
      },
      // 配置的表单
      firstItemList: [
        {
          type: "Input",
          label: "户主姓名",
          prop: "name",
          span: 8,
          placeholder: ""
        },
        {
          type: "Input",
          label: "户主身份证",
          prop: "identityNumber",
          span: 8,
          classType: "IdCard",
          placeholder: ""
        },
        {
          type: "Input",
          label: "家庭人口数",
          prop: "population",
          span: 8,
          placeholder: ""
        },
        {
          type: "Input",
          label: "联系电话",
          prop: "phonenumber",
          span: 8,
          placeholder: ""
        },
        {
          type: "data",
          label: "建档日期",
          prop: "createDate",
          span: 8,
          placeholder: "请选择..."
        },
        {
          type: "Input",
          label: "家庭档案号",
          prop: "number",
          span: 8,
          placeholder: ""
        },
        {
          type: "Input",
          label: "家庭住址",
          prop: "nowAddress",
          span: 8,
          placeholder: ""
        },
        {
          type: "Input",
          label: "门牌号码/组",
          prop: "HouseNumber",
          span: 8,
          placeholder: ""
        },
        {
          type: "Input",
          label: "家庭详细地址",
          prop: "detailedAddress",
          span: 8,
          placeholder: ""
        }
      ],
      secondItemList: [
        {
          type: "Kitchen",
          label: "厨房排风设施",
          span: 24
        },
        {
          type: "Fuel",
          label: "燃\u2002料\u2002\u2002类\u2002型",
          span: 24
        },
        {
          type: "Water",
          label: "饮\u3000\u3000\u3000\u3000水",
          span: 24
        },
        {
          type: "Toilet",
          label: "厕\u3000\u3000\u3000\u3000所",
          span: 24
        },
        {
          type: "Poultry",
          label: "禽\u3000畜\u3000栏",
          span: 24
        }
      ],
      allAlign: null,
      tableData: [
        {
          id: 10001,
          name: "张三",
          birthdata: "1989-07-15",
          identityNumber: "429005198907156973",
          sex: "男",
          age: 32,
          relationship: "子"
        },
        {
          id: 10002,
          name: "李四",
          birthdata: "1958-04-25",
          identityNumber: "422429195804256982",
          sex: "女",
          age: 63,
          relationship: "本人"
        }
      ]
    }
  },
  methods: {
    // 关闭弹框
    addDialogClosed() {
      this.$emit("update:dialogVisible", false)
      this.resetForm()
    },
    // 确定提交
    submitHandle(formName) {
      this.$refs[formName].validate(valid => {
        console.log(valid)
        if (valid) {
          console.log("提交")
          this.addDialogClosed()
        } else {
          return false
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs["ruleForm"].resetFields()
    },
    // 切换第几页
    handlePageClick(tab) {
      this.activeName = tab.name
    }
  }
}
</script>

<style lang="scss" scoped>
.dialogBody {
  .el-row {
    display: flex;
    flex-wrap: wrap;
  }
  /deep/ .is-active {
    background: #fff;
  }
  .addForm {
    /deep/ .el-form-item {
      margin-bottom: 18px !important;
    }
    .titleName {
      font-size: 22px;
      text-align: center;
    }
  }
}
/deep/ .el-dialog {
  background: #7ed0f8;
}
/deep/ .is-active {
  background: #fff;
}
</style>
